<template>
	<view class="app-components-order-goods-card bg-white ">
		<view class="e-p-20 e-flex e-flex-between">
			<slot name="header">
				<view class="e-flex e-flex-1" v-if="store" @tap="jump(store.type === 2 ? '/pages/nearby/store/info' : '/pages/store/index', { id: store.id })">
					<view class="e-m-r-12">
						<load-image mode="aspectFill" :size="['48rpx']" radius="10rpx" :src="store[storeKeys.logo]"></load-image>
					</view>
					<text class="fw-600">{{ store[storeKeys.name] }}</text>
					<view class="self-icon e-m-l-20" v-if="APP_HAS_OWN && (store.storeHasOwn || store.hasOwn)">
						{{ $t('classify.自营') }}
					</view>
				</view>
			</slot>
			<slot name="statusText"></slot>
		</view>
		<e-line></e-line>
		<view  v-for="gItem in list1" :key="gItem.id">
			<GoodsItem :info="gItem" :goodsKeys="goodsKeys" :goodsLink="goodsLink" :isJump="isJump">
				<view>
					<slot name="button" :goods="gItem" :receivingStatus="receivingStatus"></slot>
				</view>
			</GoodsItem>
		
			<slot name="deduction" :goods="gItem"></slot>
		</view>
		<fold v-if="list2.length">
			<view  v-for="gItem in list2" :key="gItem.id">
				<GoodsItem :info="gItem" :goodsKeys="goodsKeys" :goodsLink="goodsLink" :isJump="isJump">
					<view>
						<slot name="button" :goods="gItem" :receivingStatus="receivingStatus"></slot>
					</view>
				</GoodsItem>
			
				<slot name="deduction" :goods="gItem"></slot>
			</view>
		</fold>
		
		<slot name="storeCoupon"></slot>
		<slot name="orderVos"></slot>
	</view>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'order-goods-card',
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	}
	// #endif
});
</script>
<script setup lang="ts">
import {computed} from 'vue'
import { APP_HAS_OWN } from '@/env';
import type { StoreInfo, OrderGoods, OrderItem } from '@/common/request/api';
import { useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';

import GoodsItem from './goodsItem.vue'

const props = withDefaults(
	defineProps<{
		// 店铺信息
		store?: Partial<StoreInfo> & Record<string, any>;
		// 店铺信息的键值
		storeKeys?: {
			name: string;
			logo: string;
		};
		// 商品列表
		goodsList: Array<Partial<OrderGoods['deputys'][0] & OrderItem> & Record<string, any>>;
		// 商品信息的键值
		goodsKeys?: {
			image: string;
			skuName: string;
			skuId: string;
			price: string;
			name: string;
			qry: string;
		};
		// 点击商品时跳转的地址
		goodsLink?: string;
		// 点击商品事件
		isJump?: boolean;
		// 订单状态
		receivingStatus?: number;
	}>(),
	{
		storeKeys: () => ({
			name: 'name',
			logo: 'logo'
		}),
		goodsKeys: () => ({
			image: 'commodityUrl',
			skuName: 'commoditySpecName',
			skuId: 'skuId',
			price: 'deputyMoney',
			name: 'commodityName',
			qry: 'commodityCount'
		}),
		isJump: true
	}
);



const { AppSkin } = storeToRefs(useInit());

const list1 = computed(() => {
	if (props.goodsList?.length) {
		return props.goodsList.slice(0, 3);
	}
	return []
});
const list2 = computed(() => {
	if (props.goodsList?.length > 3) {
		return props.goodsList.slice(3, props.goodsList.length);
	}
	return []
});


</script>

<style lang="scss" scoped>
@include appBem_b(components-order-goods-card) {
	border-radius: 20rpx 20rpx 0 0 ;

}
</style>